<script setup lang="ts">
import { onMounted, onUnmounted, reactive, ref } from 'vue';
import MyHeader from '../../components/MyHeader.vue';
import { getHotMovie, getLikeMovie } from '../../api/movie'
import TypeMovie from './components/movie-classify/TypeMovie.vue';
import ChooseMovie from './components/movie-choose/ChooseMovie.vue';
import MyImage from '../../components/MyImage.vue';
import { useStore } from 'vuex'
const store = useStore()

interface IHotMovie {
    movieCover: string,
    movieDesc: string,
    movieId: number,
    movieName: string,
    movieScore: number,
    movieScoreNum: number,
    movieTypeId: number,
    movieView: number
}

let hotMovie = ref<IHotMovie[]>()
let LikeMovie = ref<IHotMovie[]>()


console.log("城市名称：", JSON.parse(window.sessionStorage.getItem("location")!).cityname)

getHotMovie({ cityname: JSON.parse(window.sessionStorage.getItem("location")!).cityname }).then((res: any) => {
    if (res.code == 200) {
        hotMovie.value = res.data
        console.log("热门电影列表", hotMovie.value);
    }
})

getLikeMovie({
    userId: JSON.parse(window.sessionStorage.getItem("currentUser")!).userId,
    cityname: JSON.parse(window.sessionStorage.getItem("location")!).cityname
}).then((res: any) => {
    if (res.code == 200) {
        LikeMovie.value = res.data
        console.log("喜爱电影列表", LikeMovie.value);
    }
})


window.addEventListener('scroll', () => {
    let header: HTMLElement | null = document.querySelector('header')
    header!.classList.toggle('sticky', window.scrollY > 0)
    store.commit('app/setScrollTop',document.documentElement.scrollTop)
})

</script>

<template>
    <div class="index-page">
        <div class="recommend-part center">
            <MyHeader></MyHeader>
            <div class="recommend-box">
                <el-carousel type="card" :interval="2000" v-if="hotMovie">
                    <el-carousel-item v-for="item in hotMovie">
                        <MyImage :url="item.movieCover" :data="item" :fs='20' fc='#ffffff' date=""/>
                    </el-carousel-item>
                </el-carousel>
                <div class="recommend-list space-around">
                    <div class="like-empty center" v-if="LikeMovie?.length == 0">您暂时还没有浏览记录</div>
                    <div class="recommend-item" v-for="item in LikeMovie">
                        <MyImage :url="item.movieCover" :data="item" :fs='20' fc='#ffffff' date=""/>
                    </div>
                </div>
            </div>
        </div>

        <TypeMovie></TypeMovie>
        <ChooseMovie></ChooseMovie>

    </div>
</template>

<style scoped lang="scss">
// 该变量关联MyHeader组件
$leftAndRight: 100px;

.index-page {
    width: 100%;
}

#star {
    width: 100%;
    height: 100%;
}

.recommend-part {
    position: relative;
    padding-top: 30px;
    width: 100%;
    height: 100vh;
    color: white;
    background-color: rgba(0, 0, 0, 1);

    .recommend-box {
        height: 80%;
        width: calc(100% - $leftAndRight * 2);

        .recommend-list {
            margin-top: 20px;
            height: 48%;
            justify-content: space-between !important;

            .like-empty {
                width: 100%;
                height: 100%;
                color: white;
                font-size: 33px;
                font-weight: 800;
            }

            .recommend-item {
                width: 30%;
                height: 80%;
                border-radius: 20px;
                overflow: hidden;
            }
        }
    }
}
</style>